<template>
  <div class="age-product-page">
    <!-- 顶部信息卡片 -->
    <div class="info-card">
      <div class="info-content">
        <!-- 左侧图片 -->
        <div class="info-image">
          <img src="/banner2.jpg" alt="年龄段购买情况分析" />
        </div>
        <!-- 右侧文字 -->
        <div class="info-text">
          <h2>
        📊 不同年龄段电子产品购买情况分析
        </h2>
        <p class="desc">
        在电子产品消费市场中，不同年龄段的用户往往呈现出明显的购买差异。
        年轻群体（18-25岁）普遍追求时尚与功能的结合，更倾向选择智能手机、耳机、平板电脑等价格适中、更新迭代快的产品；
        中青年群体（26-40岁）在消费中更注重性能与实用性，尤其在笔记本电脑、智能家居、办公类电子设备上的购买比例较高；
        而中老年群体（41岁及以上）则更关注耐用性与性价比，在电视机、厨房家电等大件电子产品上的消费更为明显。
        <br /><br />
        本分析基于示例电商数据，从购买数量与平均价格两个维度展开，对比不同年龄段的消费特征与趋势。
        通过数据可以直观观察到年轻人群体的购买频率更高，但单品均价相对较低；而中青年群体则在消费力上更具优势，单品均价相对较高；
        中老年群体的消费次数虽不如年轻群体频繁，但其对大件电子产品的支出同样不可忽视。
        <br /><br />
        此类分析能够为电商平台和电子产品厂商提供重要的市场参考：既有助于企业优化不同年龄段的产品布局，
        也能指导营销策略的精准化投放，从而更好地满足多层次、多样化的用户需求。
      </p>
        </div>
      </div>
    </div>

    <!-- 图表卡片 -->
    <div class="chart-card">
      <div class="chart-container" ref="chartRef"></div>
      <p class="note">提示：柱状图表示购买数量，折线图表示平均价格</p>
    </div>

    <!-- 下载按钮 -->
    <div class="download-wrapper">
      <button class="download-btn" @click="downloadChart">下载图表文件</button>
    </div>

    <!-- 页面底部 Footer -->
    <FooterInfo />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import FooterInfo from '../components/FooterInfo.vue'

// 示例数据
const rawData = [
  { category_code: 'electronics.tablet', age: 24, price: 162.01 },
  { category_code: 'electronics.audio.headphone', age: 41, price: 77.52 },
  { category_code: 'electronics.smartphone', age: 21, price: 1387.01 },
  { category_code: 'electronics.video.tv', age: 16, price: 416.64 },
  { category_code: 'computers.notebook', age: 43, price: 509.24 },
  { category_code: 'electronics.smartphone', age: 51, price: 856.46 },
  { category_code: 'electronics.audio.headphone', age: 38, price: 203.68 },
]

// 年龄段划分
const ageGroups = [
  { label: '0-20', min: 0, max: 20 },
  { label: '21-30', min: 21, max: 30 },
  { label: '31-40', min: 31, max: 40 },
  { label: '41-50', min: 41, max: 50 },
  { label: '51+', min: 51, max: 200 },
]

// 统计数量和平均价格
function getAgeStats() {
  return ageGroups.map(group => {
    const items = rawData.filter(d => d.age >= group.min && d.age <= group.max && d.category_code?.startsWith('electronics'))
    const count = items.length
    const avgPrice = count ? items.reduce((sum, d) => sum + d.price, 0) / count : 0
    return { group: group.label, count, avgPrice: Number(avgPrice.toFixed(2)) }
  })
}

const chartRef = ref(null)
let chartInstance = null

onMounted(async () => {
  await nextTick()
  const el = chartRef.value
  if (!el) return

  const stats = getAgeStats()
  chartInstance = echarts.init(el)
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['购买数量', '平均价格'], top: '5%' },
    xAxis: { type: 'category', data: stats.map(s => s.group) },
    yAxis: [
      { type: 'value', name: '购买数量' },
      { type: 'value', name: '平均价格', position: 'right' }
    ],
    series: [
      {
        name: '购买数量',
        type: 'bar',
        data: stats.map(s => s.count),
        itemStyle: { color: '#4a90e2' }
      },
      {
        name: '平均价格',
        type: 'line',
        yAxisIndex: 1,
        data: stats.map(s => s.avgPrice),
        itemStyle: { color: '#ff6f61' }
      }
    ]
  })
})

function downloadChart() {
  if (!chartInstance) return
  const url = chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' })
  const link = document.createElement('a')
  link.href = url
  link.download = 'age-product-chart.png'
  link.click()
}
</script>

<style scoped>
.age-product-page {
  max-width: 1000px;
  margin: 40px auto;
  font-family: 'Segoe UI', sans-serif;
}

/* 顶部信息卡片 */
.info-card {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 25px;
}

.info-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-image img {
  width: 240px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 70px;
}

.info-text {
  flex: 1;
}

.info-text h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.info-text .desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  text-align: justify;
}

/* 图表卡片 */
.chart-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 10px;
}

/* 下载按钮 */
.download-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.download-btn {
  background: #ff7f50;
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #ff6333;
}
</style>
